浅谈Angular Cli Schematics

写在前面

Schematics 是前端开发工作流工具，例如：创建一个组件、变更配置项至当前项目。并且不限制任何语言环境；虽然如此，但 Schematics 目前依然只能依赖 Angular Cli 来运行相应的命令行。

本文是在重构 ng-alain schematics 时阅读 @angular-devkit 源码的一些记录；而关于 Schematics 的运用在知乎上有好几篇不错的文章，我将尽可能跳开一些不必要的重复性工作，建议阅读本文时可以同下列文章一起阅读。

• 使用 Schematics 自定义 ng generate
• 深入Angular：使用Schematics编写Angular代码自动生成器
• Angular CLI是如何生成代码的？

指令类型

Schematics 一共包含四个指令：

• add 添加一个 Library 至项目
• new 创建一个新 Angular 项目
• generate 基于 Schematics 创建或修改文件
• update 更新应用程序或依赖项

其实除了 add 会事先执行一次 npm i （取决于 angular.json 的 cli/packageManager 配置值，默认：npm）指令以外，其他指令实际上都是基于 Schematics 创建或修改文件。

generate 指令会更纯粹，需要你手动指定 Schematic 名称，例如：ng g class <ClassName>。其他三个指令是对其进一步简化，像 ng add 实际相当于 ng g ng-add 这里的 ng-add 是固定名称，若你希望创建一个支持 ng add 那么你就必须有一个 ng-add 的 Schematic。

执行原理

Schematics 执行核心的本质就是在维护一个非常大的 Observable 数据流，这里的数据就是文件树。

核心的主轴是执行一个 Schematics 时会在开始时构建一个虚拟文件系统 virtual-fs 就像 Rxjs 的 Observable，后续的操作符都是对文件系统的变更动作，最后将虚拟文件系统的内容影射至物理文件中。

一个 Schematics 可以包含多个不同的指令，例如默认 Angular Schematics 有非常多我们熟悉的 module、component 等，而管理这些指令是通过 collection.json 配置项。

Schematics 创建完虚拟文件系统环境后，紧跟着依 collection.json 构建 Collection 对象，再根据指令中的名称创建 Schematic 对象；并且调用并运行 Schematic Name 所对应目录名下 index.ts 文件，例如一个 Schematic 完整的代码结构：

function rule1() {
  return (host: Tree, context: SchematicContext) => {
      // doing
  };
}
export default function(options: ApplicationOptions): Rule {
  return (host: Tree, context: SchematicContext) => {
    return chain([ rule1(), rule1() ]);
  }
}

最终返回一个 Rule 类型，其本质是：

(tree: Tree, context: SchematicContext) => Tree | Observable<Tree> | Rule | void

若返回的是一个 Observable 类型时意味者这里的空间变得无限大：

function rule1() {
  return (host: Tree, context: SchematicContext) => {
      return of(host);
  };
}

比如构建自己的远程代码片断库。

任务器

Schematics 除了运行 Schematic 指令以外，还需要一些对项目进行额外操作，例如：安装Node依赖包、初始化 Git 等。其实运行 Schematic 指令本身也是一种任务。这些任务是通过 SchematicContext 进行管理。

例如我们希望在执行一个 Schematic 指令后调用一次 Node 依赖包的安装，只需要调用内置的 NodePackageInstallTask 任务：

(host: Tree, context: SchematicContext) => {
    context.addTask(new NodePackageInstallTask());
}

Angular.json

angular.json 与 Schematic 有着非常密切的关系，大多数需要通过 angular.json 配置信息来获取目录路径、默认配置项等信息。特别是当编写 Schematic 时总是需要考虑多项目的情况，因此绝大多数都需要依赖 angular.json 来确认具体项目名及路径信息。

每一个 Schematic 指令都有相应的参数信息，这些参数信息也可以直接被映射在 angular.json 上面并当成默认参数值：

{
  "schematics": {
    "ng-alain:list": {
      "spec": false
    },
    "@schematics/angular:component": {
      "spec": false
    }
  }
}

通过 ng g ng-alain:module <name>（或 ng g component <name>）生成时将忽略测试文件；当然对于这些默认参数的转化都是 Schematics 内自动完成。

总结

以上是一些简单总结，Schematics 可玩性非常强，它是运行在一个 Node 容器内，因此可以使用当下所有 Node 类库。

而 Schematics 的操作除了文件以外，也会对文件内容进行修改，这一些也很有意思。像 ts 文件可以利用 typescript 类库来获取或调整 ts 文件内容某个变量名或值。而 html 文件可以利用 parse5 来解析并修改，绝大多数文件类型都可以找到相对应的现有类库来支持。

Schematics 只是 @angular-devkit 中的一小部分而已，还包括：Architect 用于改变 Angular cli 的运行机制，虽然本质上是在改变 Webpack 配置文件，但谁叫 Webpack 有着无限可能呢。

原先 @angular-devkit 是作为一个独立的仓储位于 @angular/devkit，然而不久前被合并入 @angular-cli 里。

（完）